<template>
  <el-dialog
    title="登录"
    :visible.sync="dialogVisible" 
    custom-class="sooc_box" 
    width="400px">
    <div class="login_box">
      <el-input v-model="user.username" placeholder="用户名"></el-input>
        <el-input v-model="user.password" placeholder="密码" type="password" @keyup.enter.native="login"></el-input>
        <el-button type="primary" @click="login">登 录</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      user:{}
    };
  },
  methods: {
    boxshow(){
      this.dialogVisible = true;
    },
    login () {
      if(!this.user.username || !this.user.password) {
        return
      }
      this.$store.dispatch('LOGIN', this.user).then(data => {
        if(data.success) {
          this.$message.success('登录成功');
          this.dialogVisible = false;
        } else {
          this.$message.error('用户名或密码不正确');
        }
      })
    },
  }
}
</script>
<style lang="postcss">
.login_box {
  & .el-input {
    margin-bottom:10px;
  }
  & .el-button { 
    width:100%;
  }
}
</style>
